﻿@model List<NavigatableNode>
@{ Ajax.Dna().Widget()
       .UserPreferences(@<text> 
    @{
        var vd = new ViewDataDictionary();
        vd["widget"] = item;
        Html.RenderPartial("_LinkEditor", Model, vd);
    }
    <div>
        Width:</div>
    <div>@Ajax.Dna().Number(item.GenerateFieldID("Width"), item.GetInt("Width")).GetHtml()</div>
    <div>
        Height:</div>
    <div>@Ajax.Dna().Number(item.GenerateFieldID("Height"), item.GetInt("Height")).GetHtml()</div>
    </text>)
       .Content(@<text>
    @{
        var _width = item.GetInt("Width").ToString() + "px";
        var _height = item.GetInt("Height").ToString() + "px";
    }
    @if (Model != null)
    {
        <div id="@item.GenerateFieldID("rotator")" style="position:relative;overflow:hidden;width:@(_width);height:@(_height);">
            <div  id="@item.GenerateFieldID("rotators")" style="width:2048px;position:absolute;">
                @foreach (var link in Model)
                {
                    <a style="position:relative;float:left;background:url('@(link.ImageUrl)');display:block;width:@(_width);height:@(_height);" 
                    href="@link.NavigateUrl" target="@(string.IsNullOrEmpty(link.Target) ? "_self" : link.Target.ToLower())">
                        @if (!string.IsNullOrEmpty(link.Text))
                        {
                            <span style="color: #ffffff; padding: 10px; width: @((item.GetInt("Width")-20).ToString())px; bottom: 0px; display: block;
                                position: absolute; opacity: 0.7; filter: Alpha(Opacity=70); background-color: #000000;">
                                @link.Text
                            </span>
                        }
                    </a>
                }
            </div>
            <div id="@item.GenerateFieldID("navi")" class="navi">
                @for (int i = 0; i < Model.Count; i++)
                {
                    <a href="@i" class="@(i == 0 ? "active" : "")"></a>
                }
            </div>
        </div>
                Ajax.RegisterStartupScript("$('#" + item.GenerateFieldID("rotator") + "').scrollable({items:'#" + item.GenerateFieldID("rotators") + "',circular: true,speed:1000,mousewheel:true}).navigator('#" + item.GenerateFieldID("navi") + "').autoscroll({ autoplay: true,interval:10000 });");
    }
    </text>)
       .Render();
}

